<template>
	<view class="heder" :style="bgColor">
		<view :style="statusBarHeight"></view>
		<view class="heder_tab">
			<view class="item">
				<slot name="left"></slot>
			</view>
			<view class="item">
				<slot name="center"></slot>
			</view>
			<view class="item right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
const props = defineProps({
	bgColor:{
		type:String,
		default:'#000000'
	}
})


const statusBarHeight = computed(() => { // 获得状态栏的高度
	let h =uni.getSystemInfoSync().statusBarHeight
	return `height:${h}px;`
})

const bgColor = computed(() => { // 改变导航栏的背景颜色
	return `background-color:${props.bgColor} ;`
})

</script>

<style lang="less" scoped>
.heder_tab{
	display: flex;
	flex-direction: row;
	height: 70rpx;
	padding: 0 20rpx;
	.item{
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center; 
		align-items: center;
	}
}
</style> 